/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
body {
    color: #333;
    font-size: 14px;
}

.fade-enter-active, .fade-leave-active {
	transition: opacity .5s;
  }
.fade-enter, .fade-leave-to {
	opacity: 0;
}

.mc {
    color: rgb(0, 122, 47);
}
a {
    color: rgb(0, 122, 47);
    text-decoration: none;
}
a:hover {
    color: rgb(0, 84, 32);
    text-decoration: underline;
}

.img {
	max-width: 100%;
}
.pure-table td {
    padding: .2em .5em;
}
.pure-form select {
    height: 2.45em;
}

.logo img {
    width: 80%;
}

.inline {
	display: inline;
}
.block {
	display: block !important;
}
.none {
    display: none;
}

.left {
	text-align: left !important;
}
.center {
	text-align: center;
}
.right {
	text-align: right !important;
}
.font-400 {
    font-weight: 400;
}
.font-500 {
    font-weight: 500;
}
.font-600 {
    font-weight: 600;
}
.font-700 {
    font-weight: 700;
}
.font-bold {
    font-weight: bold;
}
.pull-right {
	float: right !important;
}
.pull-left {
	float: left !important;
}

h3 {
    color: rgb(0, 122, 47);
}

.modal-wrap {
	position: fixed;
	top:0;
	background-color: rgba(0, 0, 0, 0.5);
	width: 100%;
	height: 100%;
	overflow: scroll;
}
.modal-box {
	width: 40%;
	background-color: #fff;
	margin: 5% 25% auto;
	border-radius: 8px;
	box-shadow: 4px 4px 8px #555;
	position: relative;
}
.modal-title {
	padding: 10px 20px;
	font-size: 18px;
	font-weight: bold;
	color: #666;
	border-bottom: 1px solid #ccc;
}
.modal-body {
	padding: 20px;
}
.modal-footer {
	padding: 10px 20px;
	text-align: right;
	border-top: 1px solid #ccc;
}

.panel {
    padding: 10px;
}

.btn-primary,
.btn-default {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    border-radius: 20px;
}
.btn-primary {
    color: #fff;
    background: #0092fa;
    margin: 1em 0;
}
.btn-default {
    background: #fff;
    border: 1px solid #ddd;
    color: #666;
    padding: 0.5em 2em;
    font-size: 80%;
}

.pure-button img {
    width: 12px;
    height: 12px;
    margin-right: 4px;
    margin-bottom: -1.5px;
}
.btn-xs {
	font-size: 70%;
}
.btn-sm {
	font-size: 85%;
}
.btn-lr {
	font-size: 110%;
}
.btn-xl {
	font-size: 125%;
}
.btn-green,
.btn-red,
.btn-orange,
.btn-blue {
	color: white;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.btn-green {
	background: rgb(0, 122, 47); /* this is a green */
}
.btn-red {
	background: rgb(238, 77, 77); /* this is a maroon */
}
.btn-orange {
	background: rgb(248, 186, 71); /* this is an orange */
}
.btn-blue {
	background: #41ccb4; /* this is a light blue */
}
.red {
    color: rgb(238, 77, 77);
}
.green {
    color: #41ccb4;
}
.blue {
    color: rgb(66, 184, 221);
}
.orange {
    color: rgb(248, 186, 71);
}

.tip-box {
    border: 1px solid #33a18f;
    background-color: #d6faf4;
    color: #0b6d5c;
    margin-bottom: 10px;
    padding: 0 20px 5px;
    font-size: 14px;
}

/*分页*/
.pagination {
	margin: 10px 0;
}
.pagination ul {
	margin: 0;
	padding: 0;
}
.pagination ul li {
	list-style: none;
	display: inline-block;
	margin-right: 2px;
}
.pagination ul li a {
    display: inline-block;
    padding: 9px 0;
    width: 34px;
	line-height: 14px;
	font-size: 14px;
	text-align: center;
	background-color: #fff;
	border: 1px solid rgb(0, 122, 47);
	color: rgb(0, 122, 47);
	text-decoration: none;
	border-radius: 25%;
}
.pagination ul li a:hover {
    background-color: rgb(0, 122, 47);
    color: #fff;
}
.pagination ul li.active a {
	background-color: rgb(0, 122, 47);
	color: #fff;
    border-color: rgb(0, 122, 47) !important;
    font-weight: bold;
}
.pagination ul li.active a:hover {
	background-color: rgb(0, 122, 47);
	color: rgb(0, 122, 47);
	border-color: rgb(0, 122, 47) !important;
}

.datepicker {
    display: inline-block;
    position: relative;
}
.datepicker .picker-panel {
    position: absolute;
    z-index: 1000 !important;
    width: 240px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 2px 2px 4px #ccc;
}
.datepicker .picker-panel table {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
}
.datepicker .picker-panel table tr td,.datepicker .picker-panel table tr th {
    text-align: center;
    padding: 4px 0;
}
.datepicker .picker-panel table tr td:hover {
    background-color: #ddd;
}

.input-search {
    position: relative;
    display: inline-block;
}
.input-search img {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 24%;
    right: 4px;
}
.input-search img:hover {
    opacity: 0.7;
}
.input-search-panel {
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    text-align: left;
}
.input-search-item {
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
}
.input-search-item:hover {
    background-color: #41ccb4;
}
.input-search-item-btn {
    color: #999;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    border-bottom: 1px solid #eee;
    background-color: #ddd;
}
.input-search-item-btn:hover {
    background-color: #41ccb4;
    color: #fff;
}

/*面包屑导航*/
.breadcrumb {
	margin: 10px 0;
}
.breadcrumb ul {
	margin: 0;
	padding: 0;
}
.breadcrumb ul li {
	list-style: none;
	display: inline-block;
	margin-right: 2px;
}
.breadcrumb a.last {
    color: #555;
    font-weight: bold;
}

select:disabled, input:disabled {
    color: #333 !important;
}

/*
 * -- LAYOUT STYLES --
 * This layout consists of three main elements, `#nav` (navigation bar), `#list` (email list), and `#main` (email content). All 3 elements are within `#layout`
 */
#layout, #nav, #list, #main {
    margin: 0;
    padding: 0;
}

/* Make the navigation 100% width on phones */
#nav {
    width: 100%;
    height: 40px;
    position: relative;
    background: rgb(37, 42, 58);
    text-align: center;
}
/* Show the "Menu" button on phones */
#nav .nav-menu-button {
    display: block;
    top: 0.5em;
    right: 0.5em;
    position: absolute;
}

/* When "Menu" is clicked, the navbar should be 80% height */
#nav.active {
    height: 80%;
}
/* Don't show the navigation items... */
.nav-inner {
    display: none;
}

/* ...until the "Menu" button is clicked */
#nav.active .nav-inner {
    display: block;
    padding: 2em 0;
}


/*
 * -- NAV BAR STYLES --
 * Styling the default .pure-menu to look a little more unique.
 */
#nav .pure-menu {
    background: transparent;
    border: none;
    text-align: left;
}
#nav .pure-menu-link:hover,
#nav .pure-menu-link:focus {
    background: rgb(55, 60, 90);
}
#nav .pure-menu-link {
    color: #fff;
    margin-left: 0.5em;
}
#nav .pure-menu-link.active {
    font-weight: bold;
    background-color: rgb(0, 122, 47);
}
#nav .pure-menu-heading {
    border-bottom: none;
    font-size:110%;
    color: rgb(75, 113, 151);
}
#nav .pure-menu-link i {
    width: 14px !important;
    margin-right: 8px;
}

.pure-menu-item img {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    margin-bottom: -2px;
}
.nav-info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    font-size: 12px;
    color: rgb(0, 122, 47);
}



/* Email Content Styles */
.content-header, .content-body, .content-footer {
    padding: 1em 2em;
}
    .content-header {
        border-bottom: 1px solid #ddd;
    }

        .content-title {
            margin: 0.5em 0 0;
        }
        .content-subtitle {
            font-size: 0.9em;
            margin: 0;
            padding-top: 4px;
            font-weight: normal;
        }
            .content-subtitle span {
                color: #999;
            }
    .content-controls {
        margin-top: 2em;
        text-align: right;
    }
        .content-controls .secondary-button {
            margin-bottom: 0.3em;
        }

    .avatar {
        width: 40px;
        height: 40px;
        display: block;
    }
    .face {
        max-width: 150px;
        display: block;
    }


/*
 * -- TABLET (AND UP) MEDIA QUERIES --
 * On tablets and other medium-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 40em) {

    /* Move the layout over so we can fit the nav + list in on the left */
    #layout {
        padding-left:150px; /* "left col (nav + list)" width */
        position: relative;
    }

    /* These are position:fixed; elements that will be in the left 500px of the screen */
    #nav, #list {
        position: fixed;
        top: 0;
        bottom: 0;
        overflow: auto;
    }
    #nav {
        margin-left:-150px; /* "left col (nav + list)" width */
        width:150px;
        height: 100%;
    }

    /* Show the menu items on the larger screen */
    .nav-inner {
        display: block;
        padding: 2em 0;
    }

    /* Hide the "Menu" button on larger screens */
    #nav .nav-menu-button {
        display: none;
    }


    #main {
        top: 33%;
        right: 0;
        bottom: 0;
        left: 150px;
        overflow: auto;
    }

}

/*
 * -- DESKTOP (AND UP) MEDIA QUERIES --
 * On desktops and other large-sized devices, we want to customize some
 * of the mobile styles.
 */
@media (min-width: 60em) {

    /* This will now take up it's own column, so don't need position: fixed; */
    #main {
        margin: 0;
        padding: 0;
    }
}